<template>
  <div
    class="topBox"
    :style="{'height':navBar+top+'px','width':'750px','background-color':bgcolor}"
  >
    <div :style="{'height':top+'px','background-color':bgcolor}"></div>
    <div class="headlayout" :style="{'background-color':bgcolor,'height':navBar+'px'}">
      <div style="flex-direction: row;align-items: stretch;flex: 1; justify-content:space-between ">
        <div
          class="rightBg"
          v-if="backFlag||hasleft"
          :style="{'height':navBar+'px','width':bgwidth+'px'}"
        >
          <slot name="left">
            <div class="leftIcon" v-if="backFlag" @click="backTo" :style="{'width':bgwidth+'px'}">
              <text class="arricon" :style="{'color':titleColor}">&#xe603;</text>
            </div>
          </slot>
        </div>
        <div class="navTit">
          <slot name="center">
            <text
              v-if="title"
              style="text-align: center;font-size: 36;"
              :style="{'color':titleColor}"
              @click="titleClick"
            >{{title}}</text>
          </slot>
        </div>
        <div class="rightBg" :style="{'height':navBar+'px','width':bgwidth+'px'}">
          <slot name="right"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Utils from "../mixin/utils";
export default {
  props: {
    bgwidth: {
      default: 100
    },
    hasleft: {
      type: Boolean,
      default: true
    },
    backFlag: {
      type: Boolean,
      default: true
    },
    title: {
      default: ""
    },

    titleColor: {
      default: "#ffffff"
    },
    hideBottomLine: {
      default: false
    },

    bgcolor: {
      default: "#303030"
    },
    autoback: {
      default: true
    },
    isloading: {
      default: false
    },
    disabled: {
      default: false
    },

    type: {
      type: String,
      default: "text"
    },
    font_size: {
      default: 20
    },
    height: {
      default: 132
    },

    navBar: {
      default: 88
    }
  },
  data() {
    return {
      top: 44
    };
  },
  methods: {
    titleClick() {
      this.$emit("titleClick");
    },
    letfClick() {
      this.$emit("letfClick");
    },
    rightClick() {
      this.$emit("rightClick");
    },
    backTo() {
      if (this.autoback) {
        // var nav = weex.requireModule("navigator");

        this.back();

        return;
      }
      this.$emit("backClick");
    },

    onclick() {
      if (!this.disabled) this.$emit("onclick");
    },

    adjust() {
      // 状态栏高度  page.statusBarHeight()
      if (this.isWeb) {
        this.top = 0;
        if (this.isIpx) {
          this.top = 88;
        }
      } else {
        var page = weex.requireModule("page");
        this.top = page.statusBarHeight();
      }
    }
  },

  created: function() {
    this.adjust();
  },
  ready: function() {}
};
</script>
<style scoped lang="less">
.topBox {
  display: flex;
  flex-direction: column;
}
.navTit {
  flex: 1;
  justify-content: center;
}
.rightBg {
  flex-direction: row;
  align-items: stretch;

  // background-color: #ffffff;
}

.leftIcon {
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  padding-left: 26px;
  padding-right: 26px;
  // background-color: #02993c;
  &:active {
    color: #eeeeee;
  }
}

.arricon {
  font-size: 40px;
  font-family: iconfont;
  color: #ffffff;
}

.headlayout {
  flex: 1;
  width: 750px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>
